<template>
	<!-- 店铺详情-扫码进入 -->
	<view class="page themeBga">
		<!-- 轮播 -->
		<view class="mb22">
			<uv-swiper :list="list" height="154"></uv-swiper>
		</view>
		<view class="boxAllTwo">
			<!-- 店铺信息 -->
			<view class="shopInfo border12 flex justifyBetween mb20 themeMask">
				<view class="flex">
					<view class="flexColumn alignCenter">
						<image class="imageBig" src="/static/images/my/icon.png"></image>
						<view class="green fz20">正常营业</view>
					</view>
					<view class="flexColumn">
						<view class="flex">
							<view class="">蟹八方 肉蟹煲·鸡爪煲</view>
							<uv-icon class="bold" name="star" color="#75301e" size="20"></uv-icon>
							<!-- <uv-icon name="star-fill" color="#75301e"></uv-icon> -->
						</view>
						<view class="gray fz24" style="margin: 10rpx 0 14rpx 0;">美食快餐·喀左县利州街道8号</view>
						<view class="gray fz24">营业时间：19:00-24:00</view>
					</view>
				</view>
				<view class="flexColumn alignEnd">
					<view class="flex">
						<view class="order border6 mr14">点</view>
						<view class="reserve border6">预</view>
					</view>
					<view class="gray fz24" style="margin: 10rpx 0 14rpx 0;">距离2.1km</view>
					<view class="flex">
						<view class="phNav border50 mr14">
							<uv-icon class="bold" name="phone" color="#75301e" size="12"></uv-icon>
						</view>
						<view class="phNav border50">
							<image src="/static/images/home/nav.png" style="width: 22rpx;height: 22rpx;"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 堂食点餐 -->
			<view class="mb20 border12">
				<view class="border12 flexColumn themeMask alignCenter mb20">
					<view class="subscribe themeColor border12 mb30" @click="goPoint">
						<image class="border50 mr30" src="" mode=""
							style="width: 70rpx;height: 70rpx;background-color: #888;">
						</image>
						<view class="fz32 fff">堂食点餐</view>
					</view>
					<view class="fz32 flex alignCenter" @click="goUrl('/pagesMy/linkWifi/linkWifi')">
						<image class="border50 mr30 themeColor" src="" mode="" style="width: 70rpx;height: 70rpx;">
						</image>
						<view class="fz32">连接WIFI</view>
					</view>
				</view>
				<view class="flex alignCenter justifyBetween  mb20">
					<view class="every fz32 flex alignCenter justifyCenter themeMask border12">
						<image class="border50 mr30 themeColor" src="" mode="" style="width: 70rpx;height: 70rpx;">
						</image>
						<view class="fz32">打包自取</view>
					</view>
					<view class="every fz32 flex alignCenter justifyCenter themeMask border12" @click="onOpenPop">
						<image class="border50 mr30 themeColor" src="" mode="" style="width: 70rpx;height: 70rpx;">
						</image>
						<view class="fz32">提前预约</view>
					</view>
				</view>
			</view>

			<!-- 提前预约 -->
			<!-- <view class="border12 flexColumn themeMask alignCenter mb20" @click="onOpenPop"
				style="border: 1px solid orange;">
				<view class="subscribe themeColor border12 mb30">
					<image class="border50 mr30" src="" mode=""
						style="width: 70rpx;height: 70rpx;background-color: #888;">
					</image>
					<view class="fz32 fff">提前预约</view>
				</view>
				<view class="fz32 mb20">
					更多功能请扫描商家桌面二维码探索
				</view>
			</view> -->
			<!-- 弹窗 -->
			<uv-popup round="12" ref="openPopRef" mode="center" @change="changePop">
				<view class="popBox flexColumn alignCenter">
					<view class="mb40 ">请选择预约方式</view>
					<!-- 仅约桌 -->
					<view class="deskBox flex alignCenter justifyBetween themeColor border40 mb40"
						@click=" onDesk">
						<view class="flex alignCenter">
							<image class="border50 mr26" src=""
								style="width: 126rpx;height: 126rpx;background-color: #fff;">
							</image>
							<view class="flexColumn fff mr30">
								<text class="bold fz32 mb10">仅约桌</text>
								<text class="fz24">无需支付提前约桌</text>
							</view>
						</view>
						<uv-icon name="arrow-right" color="#fff"></uv-icon>
					</view>
					<!-- 预约点餐 -->
					<view class="deskBox flex alignCenter justifyBetween themeColor border40"
						@click="onMeal">
						<view class="flex alignCenter">
							<image class="border50 mr26" src=""
								style="width: 126rpx;height: 126rpx;background-color: #fff;">
							</image>
							<view class="flexColumn fff mr30">
								<text class="bold fz32 mb10">预约点餐</text>
								<text class="fz24">到了就有位置提前吃</text>
							</view>
						</view>
						<uv-icon name="arrow-right" color="#fff"></uv-icon>
					</view>
				</view>
			</uv-popup>
			<!-- 店铺公告 -->
			<view class="border12 flexColumn themeMask alignCenter">
				<view class="fz32 mb20">
					店铺公告
				</view>
				<view class="notice themeBae border12 mb30">
					<view class="fz32 fff">暂无</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	// 轮播
	const list = [
		'https://cdn.uviewui.com/uview/swiper/swiper1.png',
		'https://cdn.uviewui.com/uview/swiper/swiper2.png',
		'https://cdn.uviewui.com/uview/swiper/swiper3.png',
	]
	
	
	// makeStatus:预约状态 0点餐 1仅约桌 2预约点餐
	// 去点餐
	const goPoint = () => {
		uni.setStorageSync("makeStatus", 0);
		goUrl('/pages/core/deskNum/deskNum')
	}
	
	// 仅约桌 
	const onDesk = () => {
		uni.setStorageSync("makeStatus", 1);
		goUrl('/pages/core/deskNum/deskNum')	
	}
	// 预约点餐
	const onMeal = () => {
		uni.setStorageSync("makeStatus", 2);
		goUrl('/pages/core/deskNum/deskNum')
	}

	// 弹窗
	const openPopRef = ref()
	const onOpenPop = () => {
		openPopRef.value.open()
	}
	// 跳转
	const goUrl = (url) => {
		uni.navigateTo({
			url,
		})
	}
</script>

<style lang="scss" scoped>
	// 店铺信息
	.shopInfo {
		padding: 20rpx;
		margin-top: -100rpx;
		z-index: 999;

		.order {
			padding: 2rpx 6rpx;
			background-color: #f3d08f;
			color: #e4980a;
		}

		.reserve {
			padding: 2rpx 6rpx;
			background-color: #fc8585;
			color: #f80000;
		}

		.phNav {
			width: 34rpx;
			height: 34rpx;
			background-color: #e5d8d5;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	// 预约
	.subscribe {
		width: 100%;
		height: 230rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	// 店铺公告
	.notice {
		width: 100%;
		height: 300rpx;
		padding: 20rpx 32rpx;
	}

	// 弹窗
	.popBox {
		padding: 20rpx 50rpx 0 50rpx;

		.deskBox {
			width: 530rpx;
			padding: 14rpx 50rpx 14rpx 20rpx;
		}
	}

	//  自取 || 预约
	.every {
		padding: 32rpx 70rpx 32rpx 38rpx;
	}
</style>